React-এর components হল এর প্রধান ভিত্তি, এবং এগুলি হলো ব্লক বা টুকরা যা UI তৈরি করে। React-এ দুটি ধরনের কম্পোনেন্ট ব্যবহার করা হয়: Functional Components এবং Class Components। উভয় কম্পোনেন্টের উদ্দেশ্য একই — ইউজারের জন্য ইন্টারফেস তৈরি করা, কিন্তু এগুলোর মধ্যে কিছু গুরুত্বপূর্ণ পার্থক্য রয়েছে।
Functional Components
Functional Components হল সেই কম্পোনেন্টগুলি যা সাধারণ JavaScript functions এর মতো কাজ করে। এগুলোর ভিতরে শুধুমাত্র UI এর জন্য rendering logic থাকে এবং তারা props গ্রহণ করে। এটি stateless (স্টেটলেস) এবং no lifecycle methods (লাইফসাইকেল মেথড) ধারণ করে।
উদাহরণ
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}বিশেষত্ব
- Stateless: মূলত, Functional Components কোনো স্টেট (state) ধারণ করে না (যদিও React Hooks ব্যবহার করে স্টেট যোগ করা সম্ভব)।
- নির্বাচনযোগ্যতা: সহজ এবং কমপ্যাক্ট কোড লেখা যায়।
- React Hooks সমর্থন: React Hooks (যেমন
useState,useEffect) ব্যবহারের মাধ্যমে Functional Components এখন স্টেট এবং লাইফসাইকেল মেথড ধারণ করতে পারে।
Class Components
Class Components হল সেই কম্পোনেন্টগুলি যা JavaScript classes এর মাধ্যমে তৈরি করা হয়। এগুলি সাধারণত stateful (স্টেটফুল) এবং lifecycle methods ধারণ করে, যা রেন্ডারিং এবং ইউজার ইন্টারঅ্যাকশন পরিচালনার জন্য গুরুত্বপূর্ণ।
উদাহরণ
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}বিশেষত্ব
- Stateful: Class Components এর মধ্যে state ধারণ করা যায়, যা কম্পোনেন্টের ভ্যালু বা তথ্য পরিবর্তন করতে সাহায্য করে।
- Lifecycle methods: Class Components-এ বিভিন্ন lifecycle methods থাকে যেমন
componentDidMount(),shouldComponentUpdate(), ইত্যাদি, যা কম্পোনেন্টের বিভিন্ন স্টেট পরিবর্তন বা আপডেট করার সময় ব্যবহৃত হয়। - বড় ও জটিল কোড: Class Components সাধারণত একটু বড় হয় এবং কোডের পুনঃব্যবহার কিছুটা কঠিন হতে পারে।
Functional vs Class Components: পার্থক্য
| বৈশিষ্ট্য | Functional Components | Class Components |
|---|---|---|
| কোডের আকার | ছোট এবং সহজ, কমপ্যাক্ট | বড় এবং জটিল, বেশি কোড প্রয়োজন |
| State | React Hooks (যেমন useState) দিয়ে স্টেট পরিচালনা | this.state দিয়ে স্টেট পরিচালনা |
| Lifecycle Methods | React Hooks (useEffect) দিয়ে লাইফসাইকেল মেথড | লাইফসাইকেল মেথড থাকে (যেমন componentDidMount) |
| এইটারে কোড লেখা | সহজ, ফাংশনাল কোড লেখা যায় | ক্লাস ব্যবহার করে কোড লেখা হয় |
| উপযোগিতা | সাধারণত স্টেটলেস বা ছোট ইউজার ইন্টারফেস | বড় এবং জটিল অ্যাপ্লিকেশন ডেভেলপমেন্টে ব্যবহৃত |
| সদৃশ | ফাংশনাল ডেক্লারেশন | class ডেক্লারেশন |
React Hooks - Functional Components এ State এবং Lifecycle Methods
React 16.8 এর পর, React-এ Hooks এর ব্যবহার শুরু হয়, যা Functional Components-এ স্টেট এবং লাইফসাইকেল মেথড ব্যবহারের সুযোগ দেয়। এর মাধ্যমে Functional Components অনেক বেশি ক্ষমতাশালী হয়ে উঠেছে।
useState Hook (স্টেট ব্যবস্থাপনা)
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
}useEffect Hook (লাইফসাইকেল ব্যবস্থাপনা)
import React, { useState, useEffect } from 'react';
function Timer() {
const [seconds, setSeconds] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
setSeconds(seconds => seconds + 1);
}, 1000);
return () => clearInterval(timer); // Clean up the interval
}, []);
return <p>Time elapsed: {seconds}s</p>;
}সারাংশ
- Functional Components হল সহজ, ছোট এবং ক্লিন কোড তৈরির জন্য ব্যবহৃত হয়। React Hooks এর মাধ্যমে এগুলি এখন স্টেট এবং লাইফসাইকেল মেথডও পরিচালনা করতে পারে।
- Class Components বেশ বড় এবং জটিল হতে পারে, তবে এগুলি স্টেট এবং লাইফসাইকেল মেথড ধারণ করে যা অনেক ক্ষেত্রে দরকার হতে পারে।
আজকাল, React Hooks এর কারণে Functional Components বেশিরভাগ সময় ব্যবহৃত হচ্ছে, কারণ এগুলি ছোট এবং সহজে ব্যবহৃত হতে পারে।
